<template>
  <div class="songList" ref="img">
    <SongHeader :tagsName="tagsName" @song="songIf" v-show="isSongIf" />
    <div class="songNav">
      <el-button round @click="songButton"
        >{{ tagsName ? tagsName : "全部歌单"
        }}<i class="el-icon-arrow-right el-icon--right"></i
      ></el-button>
      <div class="songBout" v-show="isShow" v-clickoutside="handleClickOutSide">
        <div class="hea">
          <h3 @click="songTag1">{{ allObj.name }}</h3>
        </div>

        <div class="songClass">
          <dl>
            <dt><i class="iconfont icon-shijie"></i> 语种</dt>
            <dd>
              <a
                href="javascript:"
                v-for="(item, index) in category1"
                :key="index + '-only'"
                @click="songTag(item)"
                >{{ item.name }}</a
              >
            </dd>
          </dl>
          <dl>
            <dt><i class="iconfont icon-gangqin"></i>风格</dt>
            <dd>
              <a
                href="javascript:"
                v-for="(item, index) in category2"
                :key="index + '-only1'"
                @click="songTag(item)"
                >{{ item.name }}</a
              >
            </dd>
          </dl>
          <dl>
            <dt><i class="iconfont icon-ziyuan"></i>场景</dt>
            <dd>
              <a
                href="javascript:"
                v-for="(item, index) in category3"
                :key="index + '-only2'"
                @click="songTag(item)"
                >{{ item.name }}</a
              >
            </dd>
          </dl>
          <dl>
            <dt><i class="iconfont icon-xiaolianhaoping"></i>情感</dt>
            <dd>
              <a
                href="javascript:"
                v-for="(item, index) in category4"
                :key="index + '-only3'"
                @click="songTag(item)"
                >{{ item.name }}</a
              >
            </dd>
          </dl>

          <dl>
            <dt><i class="iconfont icon-zhuti"></i>主题</dt>
            <dd>
              <a
                href="javascript:"
                v-for="(item, index) in category5"
                :key="index + '-only4'"
                @click="songTag(item)"
                >{{ item.name }}</a
              >
            </dd>
          </dl>
        </div>
      </div>

      <ul>
        <li
          v-for="(item, index) in tags"
          :key="index + '-only5 '"
          @click="songTag(item)"
        >
          <a href="javascript:">{{ item.name }}</a>
        </li>
      </ul>
    </div>
    <div class="songImg">
      <div
        v-for="(item, index) in playlists"
        :key="index"
        @click="SongClick(item)"
      >
        <img :src="item.coverImgUrl" alt=""  />
        <p>{{ item.name }}</p>
        <p class="iconfont icon-touxiang text1">
          {{ item.creator.nickname }}
        </p>
        <p class="iconfont icon-shipinbofang text2"></p>
      </div>
    </div>
    <el-pagination
      @current-change="handleCurrentChange"
      background
      :current-page="page"
      layout="prev, pager, next"
      :total="100"
    >
    </el-pagination>
  </div>
</template>

<script>
import SongHeader from "./SongHeader";
import Clickoutside from "element-ui/src/utils/clickoutside";
// import { mapMutations } from "vuex";
export default {
  name: "SongList",
  data() {
    return {
      tags: [],
      tagsName: "",
      playlists: [],
      page: 1,
      isShow: false,
      category1: [],
      category2: [],
      category3: [],
      category4: [],
      category5: [],
      allObj: {},
      isSongIf: true,
    };
  },
  components: {
    SongHeader,
    /*     data() {
      return {
        
      }
    }, */
  },
  methods: {
    handleClickOutSide() {
      this.isShow = false;
    },
    //精品歌单
    async getPlaylist(offset, cat) {
      const { page, tagsName } = this;
      offset = page - 1;
      cat = tagsName;

      const { playlists } = await this.$API.home.getPlaylist(offset, cat);
      this.playlists = playlists;
    },
    //分页器点击事件
    handleCurrentChange(val) {
      this.page = val;
      this.getPlaylist();
      this.$refs.img.scrollTop = 0;
      this.isShow = false;
    },
    //分类点击跳转
    songTag(item) {
      // console.log(item);
      this.tagsName = item.name;
      this.getPlaylist();

      this.page = 1;
      this.isShow = false;
    },
    songTag1() {
      this.tagsName = this.allObj.name;
      this.getPlaylist();
      this.isShow = false;
    },
    SongClick(item) {
      // 拿到歌曲id
      const { id } = item;
      //  console.log(id);
      // 跳转页面，并将数据传过去
      this.$router.history.push({
        name: "Songsheet",
        query: {
          id,
        },
      });
    },
    songIf(data) {
      console.log(data);
      if (+data) {
        this.isSongIf = true;
      } else {
        this.isSongIf = false;
      }
    },
    //歌单分类
    async getCatlist() {
      // this.$store.commit("SHOWLOADING");
      const { all, sub } = await this.$API.home.getCatlist();
      this.allObj = all;
      sub.forEach((item) => {
        switch (item.category) {
          case 0:
            this.category1.push(item);
            break;
          case 1:
            this.category2.push(item);
            break;
          case 2:
            this.category3.push(item);
            break;
          case 3:
            this.category4.push(item);
            break;
          case 4:
            this.category5.push(item);
            break;

          default:
            break;
        }
      });

      // this.$store.commit("HIDELOADING");

      // console.log(result);
      /*       const res = result.sub.filter((item) => {
        return item.category === 0;
      });
      const res2 = result.sub.filter((item) => {
        return item.category === 1;
      });
      const res3 = result.sub.filter((item) => {
        return item.category === 2;
      });
      const res4 = result.sub.filter((item) => {
        return item.category === 3;
      });
      const res5 = result.sub.filter((item) => {
        return item.category === 4;
      });
      this.category1 = res;
      this.category2 = res2;
      this.category3 = res3;
      this.category4 = res4;
      this.category5 = res5; */
    },

    songButton1() {
      this.isShow = false;
    },
    songButton() {
      this.isShow = !this.isShow;
    },
  },
  async mounted() {
    // this.$store.commit("SHOWLOADING");
    const req = await this.$API.home.getHot();
    // console.log(req);
    this.tags = req.tags;
    this.getPlaylist();
    this.getCatlist();
    // this.$store.commit("HIDELOADING");
  },
  directives: { Clickoutside },
};
</script>

<style lang="less" scoped>
.songList {
  width: 100%;
  // height: 900px;
  // height: 100%;
  overflow: auto;
  min-width: 800px;
  .songNav {
    width: 1020px;
    min-width: 800px;
    display: flex;
    justify-content: space-between;
    position: relative;
    margin: 0 auto;
    .songBout {
      position: absolute;
      // border: 1px solid black;
      top: 40px;
      // left: 10px;
      background-color: white;
      width: 750px;
      // height: 750px;
      z-index: 2;
      .hea {
        display: flex;
        width: 100%;
        height: 50px;
        line-height: 50px;
        border-bottom: solid rgb(229, 229, 229);
        align-items: center;
        h3 {
          margin-left: 10px;
          font-size: 14px;
          text-align: center;
          width: 75px;
          height: 30px;
          line-height: 30px;
          // border: 1px solid ;
          border-radius: 10px;
          background-color: rgb(253, 245, 245);
          color: rgb(236, 65, 65);
        }
      }
      .songClass {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        // height: 700px;
        dl {
          display: flex;
          font-size: 12px;
          line-height: 30px;
          &:after {
            clear: both;
            content: ".";
            display: block;
            height: 0;
            visibility: hidden;
          }
          dt {
            position: relative;
            text-align: center;
            margin-left: 10px;
            width: 100px;
            padding-top: 15px;
            flex-shrink: 0;
            color: #cfcfcf;
            i {
              position: absolute;
              top: 10px;
              left: 0px;
              font-size: 30px;
              padding: 5px;
            }
          }
          dd {
            flex-shrink: 1;
            display: flex;
            flex-wrap: wrap;
            padding: 16px 15px 0;
            a {
              width: 100px;
              text-decoration: none;
              color: rgb(55, 55, 55);
              &:hover {
                color: rgb(236, 65, 65);
              }
            }
          }
        }
      }
    }
    ul {
      display: flex;
      list-style: none;
      align-items: flex-end;
      // justify-content: space-between;
      li {
        font-size: 12px;
        padding-left: 5px;
        a {
          color: #676767;
          text-decoration: none;
          &:hover {
            color: #373737;
          }
        }
      }
    }
  }
  .songImg {
    width: 1020px;
    // min-width: 800px;
    display: flex;
    margin: 0 auto;
    flex-wrap: wrap;
    justify-content: space-between;
    align-content: flex-end;
    div {
      padding-right: 10px;
      padding-top: 10px;
      padding-bottom: 10px;
      position: relative;

      img {
        width: 185px;
        height: 200px;
      }
      p {
        padding: 10px 0;
        font-size: 14px;
        width: 180px;
        line-height: 20px;
      }
      .text1,
      .text2 {
        position: absolute;
      }
      .text1 {
        top: 180px;
        color: white;
      }
      .text2 {
        font-size: 30px;
        left: 150px;
        top: 170px;
        color: white;
      }
    }
  }
  .el-pagination {
    text-align: center;
    margin-bottom: 100px;
  }
  /*   .songPag {
    width: 1020px;
    margin: 0 auto;
  } */
}
</style>